<template>

  <el-form v-if="!isRegister" :model="loginData" :rules="rules">
    <h1>欢迎来到登录页面</h1>
    <el-form-item label="賬號" prop="username">
      <el-input v-model="loginData.username" style="width: 240px" placeholder="请输入账号" />
    </el-form-item>
    <el-form-item label="密碼" prop="password">
      <el-input v-model="loginData.password" style="width: 240px" type="password" placeholder="请输入密码" show-password />
    </el-form-item>

    <el-form-item class="flex">
      <div class="flex">
        <el-checkbox>记住我</el-checkbox>
        <el-link type="primary" :underline="false">忘记密码？</el-link>
      </div>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="LoginSubmit">登錄</el-button>
      <el-button @click="isRegister = true">注册</el-button>
    </el-form-item>
  </el-form>

  <el-form v-if="isRegister" :model="registerData" :rules="rules">
    <h1>欢迎来到注册页面</h1>

    <el-form-item label="賬號" prop="username">
      <el-input v-model="registerData.username" style="width: 240px" placeholder="请输入账号" />
    </el-form-item>
    <el-form-item label="密碼" prop="password">
      <el-input v-model="registerData.password" style="width: 240px" type="password" placeholder="请输入密码"
        show-password />
    </el-form-item>
    <el-form-item label="密碼" prop="rePassword">
      <el-input v-model="registerData.rePassword" style="width: 240px" type="password" placeholder="请再次输入密码"
        show-password />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="RegisterSubmit">注册</el-button>
      <el-button @click="isRegister = false">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { userRegisterService, userLoginService } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token';

const isRegister = ref(false)


//定义数据模型
const registerData = ref({
  username: '',
  password: '',
  rePassword: ''
})
const loginData = ref({
  username: '',
  password: ''
})

//定义表单校验规则
//校验密码的函数
function checkRePassword(rules, value, callback) {
  if (value == '') {
    callback(new Error('请再次确认密码'))
  } else if (value != registerData.value.password) {
    callback(new Error('请确保两次输入的密码相同'))
  } else {
    callback()
  }
}
const rules = {
  username: [
    { request: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 16, message: '长度5-16位非空字符', trigger: 'blur' }
  ],
  password: [
    { request: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 16, message: '长度5-16位非空字符', trigger: 'blur' }
  ],
  rePassword: [
    { validator: checkRePassword, trigger: 'blur' },
    { min: 5, max: 16, message: '长度5-16位非空字符', trigger: 'blur' }
  ]
}

async function RegisterSubmit() {
  let result = await userRegisterService(registerData.value);
  // if(result.code === 0){
  //   alert(result.msg? result.msg:'注册成功');
  // }else{
  //   alert('注册失败');
  // }
  //  alert(result.msg? result.msg:'注册成功');
  ElMessage.success(result.data.message ? result.data.message  : '注册成功');
}
// 

const tokenStore = useTokenStore()
const router = useRouter()
async function LoginSubmit() {
  let result = await userLoginService(loginData.value);
  // if(result.code === 0){
  //   alert(result.msg? result.msg:'登录成功');
  // }else{
  //   alert('登录失败')
  // }
  // alert(result.msg? result.msg:'登录成功');
  ElMessage.success(result.data.message ? result.data.message : '登录成功');
  //存储token
  tokenStore.setToken(result.data);
  //跳转首页，借助路由完成
  router.push('/');
}

</script>

<style></style>